<template>
  <div class="system">
    <div class="top">
      <div class="newBtn" @click="creat">
        新建产品
      </div>
      <div class="top_right">
        <el-input placeholder="产品名称" v-model="workStatus" class="search_info">
        </el-input>
        <el-button type="primary" @click="getList(1)" class="searchBtn">搜索</el-button>
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="date"
          label="产品编号"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="产品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="担保方式"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="额度"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="利率"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="区域"
          width="180">
        </el-table-column>
        <el-table-column
          width="180"
          label="启用状态">
          <template slot-scope="{row}">
            <el-switch v-model="row.istrue"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="{row,$index}" class="opt_table">
            <span class="opt_font pad_right" @click="preview(row.id)">编辑</span>
            <span class="opt_font" @click="preview(row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="creatShow" title="新增产品" width="666px">
        <div class="row_inl">
          <div class="sel_font">产品名称</div>
          <el-input v-model="workStatus"  class="sel_inp" placeholder="请输入产品名称">
          </el-input>
        </div>
        <div class="row_inl">
          <div class="sel_font">产品类型</div>
          <el-select v-model="workStatus"  class="sel_inp">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="row_inl">
          <div class="sel_font">适用区域</div>
          <el-select v-model="workStatus"  class="sel_inp">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="row_inl">
          <div class="sel_font">贷款额度</div>
          <el-input v-model="workStatus"  class="sel_inp" placeholder="请输入贷款额度">
          </el-input>
        </div>
        <div class="row_inl">
          <div class="sel_font">贷款期限</div>
          <el-select v-model="workStatus"  class="sel_inp">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="row_inl">
          <div class="sel_font">参考利率</div>
          <el-select v-model="workStatus"  class="sel_inp">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="row_inl">
          <div class="sel_font">担保方式</div>
          <el-select v-model="workStatus"  class="sel_inp">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="row_inl">
          <div class="sel_font">联系电话</div>
          <el-input v-model="workStatus"  class="sel_inp" placeholder="请输入联系电话">
          </el-input>
        </div>
        <div class="row_inl">
          <div class="sel_font">申请条件</div>
          <el-input v-model="workStatus"  class="sel_inp" placeholder="请输入申请条件">
          </el-input>
        </div>
        <div class="row_inl">
          <div class="sel_font">产品简介</div>
          <el-select v-model="workStatus"  class="sel_inp">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="row_inl">
          <div class="sel_font">适用客户</div>
          <el-select v-model="workStatus"  class="sel_inp">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="row_inl">
          <div class="sel_font">提交材料</div>
          <el-select v-model="workStatus"  class="sel_inp">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="row_inl">
          <div class="sel_font">产品特点</div>
          <el-select v-model="workStatus"  class="sel_inp">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="backBtn">
          <el-button @click="goback">返回</el-button>
          <el-button type="primary">新建</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import { MessageBox } from 'element-ui'
export default {
  components: {
   
  },
  data() {
    return {
      creatShow: false,
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        istrue: true
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
            id: 31,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 32,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
    }
  },
  created() {
    
  },
  mounted(){
    
  },
  methods: {
    creat() {
      this.creatShow = true
    }
  }
}
</script>
<style scoped>
  .system {
    margin: 24px;
  }
  .top {
    display: flex;
  }
  .top_right {
    position: absolute;
    right: 24px;
    display: flex;
  }
  .search_info {
    margin-right: 12px;
  }
  .newBtn {
    width: 134px;
    height: 40px;
    color: #409EFF;
    font-size: 14px;
    background: rgba(64,158,255,0.10);
    padding:10px 38px;
    border: 1px solid #409EFF;
    border-radius: 2px;
    cursor: pointer;
  }
  .table {
    margin-top: 24px;
  }
  .opt_font {
    color: #1e88e5;
    cursor: pointer;
  }
  .pad_right {
    padding-right: 36px;
  }
  .backBtn {
    text-align: center;
    margin-top:10px;
  }
  /deep/ .el-dialog .el-dialog__body {
    flex: 1;
    overflow-y: auto;
    padding-top: 0;
  }
  .sel_inp {
    width: 400px;
    height: 48px;
  }
  .row_inl {
    display: flex;
  }
  .sel_font {
    position: relative;
    top: 8px;
    width: 150px;
    text-align: right;
    padding-right: 24px;
  }
</style>
